import React, {
	Component
} from 'react';
import {
	inject,
	observer
} from 'mobx-react';
import {
	Button,
	Tools
} from "weaver-mobile";
import Form from './Form';
import '../../../style/secondaryVerification.less';
const getLabel = Tools.getLabel;

@inject('secondaryVerificationStore')
@observer
export default class SecondaryVerification extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {
		const {
			secondaryVerificationStore: store
		} = this.props, {
			isVerify,
		} = store;

		isVerify();
		document.title = getLabel('388412',"二次验证密码");
	}

	componentWillUnmount() {
		const {
			secondaryVerificationStore: store
		} = this.props;
		store.showIntroduction();
	}

	render() {
		const {
			secondaryVerificationStore: store
		} = this.props, {
			whatIsSv,
			btn_name,
			BTN,
			hideForm,
		} = store;

		const introduction = (
			<div className='introduction'>
				<img src='/hrm/hrm_e9/image/SecondaryVerify.png' />
				<p dangerouslySetInnerHTML = {{ __html: whatIsSv}} />
				<Button {...BTN}>{btn_name}</Button>
			</div>
		)

		const form = (
			<div style={{height:'100%'}}>
				<div className='scroll'>
					<Form store={store}/>
				</div>
				<div className='foot-button'>
					<Button {...BTN}>{btn_name}</Button>
				</div>
			</div>
		)

		return (
			<div className='secondary-verify'>
				{
					hideForm ? introduction : form
				}
			</div>
		);
	}
}